<template>
    <div>
        <div v-if="propJson.isForEach" :tempInfo="spanContent">
            <span :style="execStyle" v-for="item in responseInfo" :key="item" :class="propJson.isClickCopy || propJson.isClickAction ? 'clickCopyClass' : ''"
                  @click="spanClick(item)">
                {{item}}
                <br v-if="propJson.isBlock" />
            </span>
        </div>
        <span v-if="!propJson.isForEach" :style="execStyle" :tempInfo="spanContent" :class="propJson.isClickCopy || propJson.isClickAction ? 'clickCopyClass' : ''"
              @click="spanClick(responseInfo)">
            {{responseInfo}}
        </span>
    </div>
</template>

<script name="SpanComponent" setup lang="ts">
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import { ElMessage } from 'element-plus'
import {computed, defineProps, ref} from "vue";
import {useRouter} from "vue-router";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let responseInfo = ref("");

let router = useRouter();

let execStyle = computed(() => {
    let styleStr = "";
    if (propJson.value.spanStyleLineHeight) {
        styleStr += `line-height: ${propJson.value.spanStyleLineHeight};`
    }
    if (propJson.value.spanStyleFontSize) {
        styleStr += `font-size: ${propJson.value.spanStyleFontSize};`
    }
    if (propJson.value.spanStyleAlignCenter) {
        styleStr += `display: flex; align-items: center;`
    }
    if (propJson.value.spanStyleJustifyCenter) {
        styleStr += `display: flex; justify-content: center;`
    }
    if (propJson.value.spanStyleFontColor) {
        styleStr += `color: ${propJson.value.spanStyleFontColor};`;
    }
    if (propJson.value.isBold) {
        styleStr += " font-weight: bold;";
    }
    if (propJson.value.spanStyleFontFamily) {
        styleStr += `font-family: ${propJson.value.spanStyleFontFamily};`
    }
    return styleStr;
})

let spanContent = computed(() => {
    doResponse();
})

function execThen(resValue) {
    if (!resValue && propJson.value.editFlag) {
        responseInfo.value = "暂无数据"
    } else {
        responseInfo.value = resValue
    }
}

function execCatch(resValue) {

}

function execActionThen(execParam) {

}

function execActionCatch(execParam) {

}

async function doResponse() {
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execThen, execCatch, null)
}

function doClickCopy(item) {
    const textArea = document.createElement("textarea")
    textArea.value = item
    textArea.style.position = "fixed"
    textArea.style.left = '0'
    textArea.style.top = '0'
    document.body.appendChild(textArea)
    textArea.select()
    try {
        const result = document.execCommand("copy")
        if (result) {
            ElMessage({
                message: '复制成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '复制失败',
                type: 'error',
            })
        }
    } catch (error) {
        ElMessage({
            message: '复制失败',
            type: 'error',
        })
    }
    textArea.remove()
}

async function doClickAction() {
    if (propJson.value.clickActionType === 'routeTo') {
        await router.push({path: propJson.value.clickActionInfo.routeToInfo.routeTo})
    } else if (propJson.value.clickActionType === 'action') {
        // 定义一个标志位，后续同步执行
        let awaitObj = {flag: false, res: true}
        await doThirdServiceAction(propJson.value.clickActionInfo.actionList, awaitObj, commonParam.value, execActionThen, execActionCatch, {});
    }
}

function spanClick(item) {
    if (propJson.value.editFlag) {
        return;
    }
    // 优先触发拷贝事件
    if (propJson.value.isClickCopy) {
        doClickCopy(item);
    }
    if (propJson.value.isClickAction) {
        doClickAction();
    }
}
</script>

<style scoped lang="less">
.clickCopyClass {

}

.clickCopyClass:hover {
    cursor: pointer;
}
</style>